<!DOCTYPE html>
<html>
<head lang="en">
	<style type="text/css">
		#singleFile{border:1px solid #F00; width:600px; min-height:200px;} 
		#multipleFile{border:1px solid #000; width:600px; min-height:200px;}
		#customFile{border:1px solid #000; width:600px; min-height:200px;}

	p{clear : left;}
	h3,h4{ text-align:center} 
	</style>
    <meta charset="UTF-8">
    <title>数据清洗v3.0</title>
</head>
<body>
    <h3 >测试文件请使用正确的命名规范xxx.doc或xxx.docx</h3>
    <h4 >请使用Chrome或Firefox</h4>
	
	请选择待处理文件类型：<select id="sel" onChange="chg()">
	<option value="">请选择处理模式</option>
	<option value="" disabled>------------------------------------</option>
	<!--<option value="single">单文件多公司信息</option>
	<option value="multiple">批量处理单文件单公司信息</option>
	-->
	<option value="custom">自定义分割标志</option>
	</select>

    <div id="customFile" style="display:none">
		<h4 >请上传自定义格式文件及内容文件</h4>
		<hr/>
		<form method="post" action="#" enctype="multipart/form-data" >
			上传格式文件(txt)：<input type="file" name="customfile" id="customFile1"/><br/><br/>
            上传内容文件(doc/docx)：<input type="file" name="contentfile" id="contentfile1"/><br /><br />
			<!--<input type="submit" value="提交"/>-->
            <input type="button" onclick="uploadFile()" value="提交"/>
            <div id="progressNumber"></div>
		</form>
        <!--<a href="downloadTempFile">下载临时内容</a>-->
	</div>
{% include "share/footer.html" %}
</body>
<script>
function chg(){
    if(document.getElementById("customFile").style.display="")
	{
		document.getElementById("customFile").style.display="";
		document.getElementById("singleFile").style.display="none";
		document.getElementById("multipleFile").style.display="none";
	}
	/*if(document.getElementById("sel").value=="single"){
		document.getElementById("singleFile").style.display="";
		document.getElementById("multipleFile").style.display="none";
		document.getElementById("customFile").style.display="none";
	}else if (document.getElementById("sel").value=="multiple")
	{
		document.getElementById("singleFile").style.display="none";
		document.getElementById("multipleFile").style.display="";
		document.getElementById("customFile").style.display="none";
	}else
	{
		document.getElementById("customFile").style.display="";
		document.getElementById("singleFile").style.display="none";
		document.getElementById("multipleFile").style.display="none";
	}*/
}


      function uploadFile() {
        var fd = new FormData();
        fd.append("customfile", document.getElementById('customFile1').files[0]);
        fd.append("contentfile", document.getElementById('contentfile1').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, true);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "/mercury/uploadFileHandler");//修改成自己的接口
        xhr.send(fd);
      }
      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }
      function uploadComplete(evt) {
        /* 服务器端返回响应时候触发event事件
        alert(evt.target.responseText);*/
          return evt.target.responseText;
      }
      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }
      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }

</script>

</html>